<template>
  <el-dialog v-if="load" :close-on-click-modal="false" title="历史采购订单价格" v-model="visible" align-center width="1000px" @close="handleClose">
    <div><span class="text-gray-500">sku:</span> {{ form.sku }}</div>
    <div><span class="text-gray-500">产品名称:</span> {{ form.sku_name }}</div>
    <vxe-table ref="table" :data="form.list">
      <vxe-column title="采购单号" field="purchase_no"></vxe-column>
      <vxe-column title="供应商" field="supplier_name"></vxe-column>
      <vxe-column title="下单价" field="total_price"></vxe-column>
      <vxe-column title="下单数量" field="purchase_num"></vxe-column>
      <vxe-column title="开票税点" field="tax_rate"></vxe-column>
      <vxe-column title="含税价" field="unit_price_tax"></vxe-column>
      <vxe-column title="单个运费" field="unit_tracking_price"></vxe-column>
      <vxe-column title="单个采购成本">
        <template #default="{ row }">
          {{ row.is_drawback === 2 ? row.unit_purchase_price_tax : row.unit_purchase_price }}
        </template>
      </vxe-column>
      <vxe-column field="aaa">
        <template #header>
          下单人员<br>采购时间
        </template>
        <template #default="{ row }">
          {{ row.create_user }}<br>{{ row.create_time }}
        </template>
      </vxe-column>
      <vxe-column title="采购耗时" field="purchase_date"></vxe-column>
    </vxe-table>
    <template #footer>
      <el-button @click="close">关 闭</el-button>
      <el-button type="primary" :loading="loadings.create" @click="create(formRef)">保 存</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import api from './api'
import { ElMessage } from 'element-plus'
const props = defineProps({
  options: { type: Object, default: () => ({}) },
})
const emit = defineEmits(['close', 'success'])

const load = ref(false)
const visible = ref(false)
let loadings = reactive({})

// 表单处理
const formRef = ref()
const form = ref({})

// 打开弹窗
const open = async (sku) => {
  if (!load.value) {
    load.value = true
    await 1
  }
  api.history({ sku }).then(res => {
    form.value = res.data
  })
  loadings = reactive({})
  visible.value = true
  nextTick(() => {
    formRef?.value.clearValidate()
  });
}
// 关闭弹窗
const close = () => {
  visible.value = false
}

const handleClose = () => {
  emit('close')
}
// 提交
const create = async (formRef) => {
  const validator = await formRef.validate()
  if (!validator) return
  loadings.create = true
  api.adjust(form.value).then(res => {
    ElMessage.success('操作成功')
    emit('success')
    close()
  }).finally(() => {
    loadings.create = false
  })
}

defineExpose({ open })
</script>